<template>
    <div class="detail_module_panel audit-record" ref="record">
        <!--标题-->
        <div class="wrap">
            <h3 id="personal_info" class="detail_panel_title detail_panel_title_icon other_info_icon">{{$t('audit.auditRemark')}}</h3>
            <el-button type="primary" class="search" @click="getTableData" size="medium">查询</el-button>
        </div>
        <div class="panel_info_content" v-if="showTable">
            <!--信审备注-->
            <el-table class="loan_history_table" max-height="320" :data="tableData" style="width: 100%">
                <el-table-column align="left" prop="orderId" :label="$t('common.innerOrderId')" width="180"></el-table-column><!--内部订单号-->
                <el-table-column align="left" :label="$t('common.lastRemarkTime')" prop="addTime"><!--最后备注时间-->
                    <template slot-scope="scope">{{ scope.row.addTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <el-table-column align="left" prop="auditorName" :label="$t('audit.firstReviewer')"></el-table-column><!--初审员-->
                <el-table-column :show-overflow-tooltip="true" prop="remark" :label="$t('audit.auditRemark')" min-width="200"><!--信审备注-->
                    <template slot-scope="scope">{{ scope.row.remark }}</template>
                </el-table-column>
            </el-table><!--end table-->
            <pagination @pageChange="pageChange" :page="page">分页组件</pagination>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';

    let that = null;
    export default {
        name: 'auditRecord',
        components: {
            Pagination,
        },
        props: {
            userId: {
                default: ''
            },
            orderId: {
                default: ''
            }
        },
        mixins: [mixin],
        data() {
            return {
                showTable:false,
                tableData: [],
            };
        },
        methods: {
            // 获取信审备注
            getTableData(page = this.page) {
                const params = {
                    userId: this.userId,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                this.showTable = true;
                this.$api.audit.getAuditRemark(params).then((res) => {
                    const {status, data} = res;
                    if ('1' === status) {
                        this.tableData = data.data;
                        // this.setPage(data.page, this.page);
                        this.page.recordsTotal = data.pageCount || 0;
                        this.$nextTick(()=>{
                            let panelList = document.getElementById('panel_list');
                            panelList.scrollTo(0,10000)
                        })
                    }
                });
            }
        },
        filters: {
        },
        created() {
            this.page.pageSize = 4;
            // this.getTableData();
        }
    };
</script>

<style lang="scss" scoped>
    // .audit-record{
        // min-height: 200px;
    // }

    .ml10 {
        margin-left: 10px;
    }

    .blue {
        color: #1983FA;
        margin-left: 10px;
    }

    .gray {
        color: #a6a8aa;
        margin-left: 10px;
    }

    .bold-font {
        font-weight: bold;
    }

    .contact {
        margin-bottom: 40px;
    }

    .contact_row.row {
        margin-bottom: 30px;
        .label {
            height: 24px;
            line-height: 24px;
        }
    }
    .wrap{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid #e5e8eb;
        .search{
            margin-left: 50px;
            padding:12px 20px!important;
        }
        .detail_panel_title{
            border-bottom: none;
        }
    }
    .dialog-title {
        float: left;
        .title_L {
            font-size: 20px;
            font-weight: 700;
        }
        .title_R {
            font-size: 12px;
            font-weight: 700;
            margin-left: 10px;
            margin-bottom: 20px;
        }
        .fontYellow {
            color: yellow;
        }
        .fontRed {
            color: red;
        }
        .fontNormal {
            color: inherit;
        }
    }
    .el-button {
        padding:4px;
    }
</style>
